<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>APP公告</title>
    <%--<%@ include file="/WEB-INF/layouts/index-header.jsp" %>--%>
    <%--<link rel="stylesheet" href="${staticPath}/admin/tcsf/reset.css" />--%>
    <link href="${staticPath}/admin/iconfont/iconfont.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="${staticPath}/admin/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${staticPath}/admin/tcsf/tcsf.panel.css" />
    <link rel="stylesheet" href="${staticPath}/admin/tcsf/tcsf.form.css" />
    <link rel="stylesheet" href="${staticPath}/admin/tcsf/content.css" />
    <link rel="stylesheet" href="${staticPath}/commons/wangEditor/release/wangEditor-fullscreen-plugin.css"/>
    <script src="${staticPath}/admin/tcsf/jquery.min.js"></script>
    <script type="text/javascript">
        var _ctx = '${ctx}';
        var _staticPath = '${staticPath}';
    </script>
    <script src="${staticPath}/admin/lib/jquery.form/jquery.form.min.js"></script>
    <script src="${staticPath}/admin/lib/jquery.form/jquery.validate.min.js"></script>
    <script src="${staticPath}/admin/lib/jquery.form/jquery.validate.extend.js"></script>
    <script src="${staticPath}/admin/lib/jquery.form/messages_zh.js"></script>
    <script type="text/javascript" src="${staticPath}/admin/lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="${staticPath}/admin/tcsf/content.js"></script>
    <script type="text/javascript" src="${staticPath}/commons/wangEditor/release/wangEditor.js"></script>
    <script type="text/javascript" src="${staticPath}/commons/wangEditor/release/wangEditor-fullscreen-plugin.js"></script>
    <style type="text/css">
        .tpanel .panel-content {
            background: #f3f3f4;
        }

        .ibox-content {
            clear: both;
            font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 13px;
            color: #676a6c;
        }

        .ibox-content {
            background-color: #fff;
            color: inherit;
            padding: 15px 20px 20px;
            border-color: #e7eaec;
            -webkit-border-image: none;
            -o-border-image: none;
            border-image: none;
            border-style: solid solid none;
            border-width: 1px 0;
        }

        #vertical-timeline {
            position: relative;
            padding: 0;
            margin-top: 2em;
            margin-bottom: 2em;
        }

        .vertical-container {
            width: 90%;
            max-width: 1170px;
            margin: 0 auto;
        }

        #vertical-timeline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 18px;
            height: 100%;
            width: 4px;
            background: #f1f1f1;
        }

        .vertical-timeline-block:first-child {
            margin-top: 0;
        }

        .vertical-timeline-block {
            position: relative;
            margin: 2em 0;
        }

        .navy-bg {
            background-color: #1ab394;
            color: #fff;
        }

        .vertical-timeline-icon {
            position: absolute;
            top: 0;
            left: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 16px;
            border: 3px solid #f1f1f1;
            text-align: center;
        }

        .vertical-timeline-icon i {
            display: block;
            width: 24px;
            height: 24px;
            position: relative;
            left: 50%;
            top: 50%;
            margin-left: -12px;
            margin-top: -9px;
        }

        .dark-timeline .vertical-timeline-content, .dark-timeline.center-orientation .vertical-timeline-content {
            background: #f5f5f5;
        }

        .vertical-timeline-content {
            position: relative;
            margin-left: 60px;
            background: #fff;
            border-radius: .25em;
            padding: 1em;
        }

        .center-orientation.dark-timeline .vertical-timeline-content:before {
            border-color: transparent #f5f5f5 transparent transparent;
        }

        .dark-timeline .vertical-timeline-content:before {
            border-color: transparent #f5f5f5 transparent transparent;
        }

        .vertical-timeline-content::before {
            content: '';
            position: absolute;
            top: 16px;
            right: 100%;
            height: 0;
            width: 0;
            border: 7px solid transparent;
            border-right: 7px solid #fff;
        }

        .ibox-content h1, .ibox-content h2, .ibox-content h3, .ibox-content h4, .ibox-content h5, .ibox-title h1, .ibox-title h2, .ibox-title h3, .ibox-title h4, .ibox-title h5 {
            margin-top: 5px;
        }

        .vertical-timeline-content h2 {
            font-size: 18px;
        }

        .vertical-timeline-content h2 {
            font-weight: 400;
        }

        .vertical-timeline-content p {
            font-size: 13px;
        }

        .vertical-timeline-content p {
            margin: 1em 0;
            line-height: 1.6;
        }

        .vertical-timeline-content .btn {
            margin-left: 5px;
            float: right;
        }

        .float-e-margins .btn {
            margin-bottom: 5px;
        }

        .btn-primary {
            background-color: #1ab394;
            border-color: #1ab394;
            color: #FFF;
        }

        .btn {
            border-radius: 3px;
        }

        .vertical-timeline-content .vertical-date {
            float: left;
            font-weight: 500;
        }

        .vertical-date small {
            color: #1ab394;
            font-weight: 400;
        }

        .vertical-timeline-content:after {
            content: "";
            display: table;
            clear: both;
        }

        .vertical-timeline-block:after {
            content: "";
            display: table;
            clear: both;
        }

        /*编辑器*/
        /* table 样式 */
        .contentDiv table {
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
        }

        .contentDiv table td,
        .contentDiv table th {
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            padding: 3px 5px;
        }

        .contentDiv table th {
            border-bottom: 2px solid #ccc;
            text-align: center;
        }

        /* blockquote 样式 */
        .contentDiv blockquote {
            display: block;
            border-left: 8px solid #d0e5f2;
            padding: 5px 10px;
            margin: 10px 0;
            line-height: 1.4;
            font-size: 100%;
            background-color: #f1f1f1;
        }

        /* code 样式 */
        .contentDiv code {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            background-color: #f1f1f1;
            border-radius: 3px;
            padding: 3px 5px;
            margin: 0 3px;
        }

        .contentDiv pre code {
            display: block;
        }

        /* ul ol 样式 */
        .contentDiv ul, ol {
            margin: 10px 0 10px 20px;
        }

        .contentDiv img {
            max-width: 50%;
        }
    </style>

</head>
<body>

<div class="tpanel">
    <div class="panel-content">
        <div class="container-fluid">

            <div class="ibox-content" style="padding-top:50px;">
                <form id="createForm" class="form-horizontal">

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">标题</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="title" name="title"
                                   placeholder="请输入标题" required maxlength="20"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">公告类型</label>
                        <div class="col-sm-8">
                            <label><input type="radio" checked="checked" name="type" onchange="typeChange()" value="text">&nbsp;文本</label>
                            <label><input type="radio" name="type" style="margin-left: 10px" onchange="typeChange()" value="image">&nbsp;图文</label>
                            <label><input type="radio" name="type" style="margin-left: 10px" onchange="typeChange()" value="url">&nbsp;链接</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="content" class="col-sm-2 control-label">公告内容</label>
                        <div class="col-sm-8" id="myContentDiv">
                            <textarea id="content" class="form-control" name="content"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-8 col-sm-offset-2" style="text-align: right;">
                            <button type="submit" class="btn btn-success">发布公告</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
        <div class="container-fluid">
            <div class="ibox-content" id="ibox-content" style="border-bottom: 1px solid #e7eaec;">

                <div id="vertical-timeline" class="vertical-container center-orientation dark-timeline">

                </div>
                <div style="text-align: center">
                    <a href="javascript:load();" id="moreNotice" style="text-decoration:none"> 加载更多公告</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    changeTitle('APP公告');
    var editor;
    var E;
    var $page = 1;
    $(function () {
        initForm('#createForm', "${ctx}/admin/notice/insertNotice", function (r) {
            var resp = $.parseJSON(r);
            window.parent.layer.closeAll('loading');
            if (resp.code == 'OK') {
                window.location.href = '${ctx}/admin/notice';
                window.parent.layer.msg('保存成功', {icon: 1});
            } else {
                window.parent.layer.msg(resp.message, {icon: 2});
            }
        });
        load();
    })

    function load() {
        $.getJSON('${ctx}/admin/notice/page-list?page=' + $page + '&size=10&sort=created_time&order=desc&', function (resp) {
            if (resp.code == 'OK') {
                var html = '';
                var total = resp.body.total;
                for (var i in resp.body.rows) {
                    var row = resp.body.rows[i];
                    html += '<div class="vertical-timeline-block">';
                    html += '<div class="vertical-timeline-icon navy-bg">';
                    html += '<i class="fa fa-briefcase"></i>';
                    html += '</div>';
                    html += '<div class="vertical-timeline-content" id="contentDiv">';
                    html += '<a href="javascript:deleteNotice(' + row.id + ');" style="color: red;float: right"> 删除</a>';
                    if (row.title) {
                        html += '<h2>' + row.title + '</h2>';
                    }
                    html += '<div>' + row.content + '</div>';
                    html += '<br/>';
                    html += '<span class="vertical-date">' + row.createdTime + '<br>';
                    html += '<small>' + row.day + '</small>';
                    html += '</span>';
                    html += '</div>';
                    html += '</div>';
                }
                var html1 = $('#vertical-timeline').html();
                $('#vertical-timeline').html(html1 + html);
                $page++;
                if(total === 0){
                    $('#moreNotice').html("暂无公告");
                    $('#moreNotice').attr("disabled",true);
                    $('#moreNotice').css("cursor", "default");
                } else if (total == $('#vertical-timeline > .vertical-timeline-block').length) {
                    $('#moreNotice').html("我已经到底了");
                    $('#moreNotice').attr("disabled",true);
                    $('#moreNotice').css("cursor", "default");
                } else if (total > $('#vertical-timeline > .vertical-timeline-block').length) {
                    $('#moreNotice').html("加载更多公告");
                    $('#moreNotice').attr("disabled",false);
                    $('#moreNotice').css("cursor", "pointer");
                }
            }
        });
    }

    function deleteNotice(id) {
        topBootbox.prompt({
            title: '请输入管理密码确认删除此公告',
            onEscape: true,
            backdrop: true,
            animate: true,
            buttons: {
                confirm: {
                    label: '删除',
                    className: 'btn-danger'
                },
                cancel: {
                    label: '取消',
                    className: ''
                }
            },
            inputType: 'password',
            callback: function (result) {
                if (result) {
                    $.post('${ctx}/admin/notice/careful-delete', {id: id, password: result}, function (resp) {
                        if (resp.code == 'OK') {
                            window.parent.layer.msg('删除成功', {icon: 1});
                            window.parent.changeUrl('${ctx}/admin/notice');
                        } else {
                            window.parent.layer.msg('删除失败:' + resp.message, {icon: 2});
                        }
                    }, 'json');
                }
            }
        });
    }

    function generateEditor() {
        E = window.wangEditor;
        editor = new E('#editor');
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'list',  // 列表
            'justify',  // 对齐方式
            'image',  // 插入图片
            'undo',  // 撤销
            'redo',  // 重复
        ]
        editor.customConfig.onchange = function (html) {

            if (html.length >= 45000) {
                //截取50000个字符，然后在取出最后一个>括号 截取到那里
                html = html.substring(0, 45000);
                html = html.substring(0, html.lastIndexOf(">"));
                editor.txt.html(html);
                window.parent.layer.msg("最多只能输入10000个字符", {icon: 2});
                return;
            }
            $('#content').val(editor.txt.html());
        };
        editor.customConfig.uploadImgServer = '${ctx}/admin/notice/uploderContentImage';  // 上传图片到服务器
        editor.customConfig.uploadFileName = 'img';
        editor.customConfig.showLinkImg = false;
        // 限制一次最多上传 1 张图片
        editor.customConfig.uploadImgMaxLength = 5;
        editor.customConfig.pasteFilterStyle = true;
        // 将图片大小限制为 3M
        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
        editor.customConfig.uploadImgHooks = {
            customInsert: function (insertImg, result, editor) {
                var url = result.data;
                $.each(url, function (n, value) {
                    insertImg("${ctx}" + value);
                })
            }
        }
        editor.create();
        E.fullscreen.init('#editor');
    }

    function typeChange() {

        var html = "";
        var val = $("input[name='type']:checked").val();
        if (val === 'text') {
            html += '<textarea id="content" class="form-control" name="content"></textarea>';
            $('#myContentDiv').html(html);
        } else if (val === 'image') {
            html += '<div id="editor" style="height: 200px;padding-top: 20px;">' +
                '</div>' +
                '<textarea id="content" name="content" class="hidden"></textarea>';
            $('#myContentDiv').html(html);
            generateEditor();
        } else if (val === 'url') {
            html += '<input type="url" class="form-control" name="content" required placeholder="请输入链接" is\>';
            $('#myContentDiv').html(html);
        }

    }
</script>

</body>
</html>
